<template>
	<!-- 火灾监测 -->
	<view class="p-x-10 p-t-10">
		<u-collapse :value="showMoreKeys" ref="collapse">
			<u-collapse-item name="2" disabled>
				<template #title>
					<view class="content-item-title"><text class="title-txt">实时监测画面</text></view>
				</template>
				<my-grid :list="['128838b0f9e547f6a17375548f4c939f']" :col="1">
					<template #default="{ item, index }">
						<my-play-video :cameraIndexCode="item" style="height: 440rpx; margin-bottom: 50rpx" />
					</template>
				</my-grid>
			</u-collapse-item>

			<u-collapse-item name="0">
				<template #title>
					<view class="content-item-title"><text class="title-txt">监测设备统计</text></view>
				</template>
				<view class="m-y-10">
					<view class="b-r-4 m-b-10 flex m-between">
						<view>多光谱摄像机数</view>
						<view class="flex m-between">
							<up-count-to bold :endVal="total" fontSize="16" color="#0052D9" />
							<view>台</view>
						</view>
					</view>
					<u-line-progress :percentage="normalRate" height="10" activeColor="#437BFC" inactiveColor="#f7f7f7" />
					<view class="b-r-4 m-t-10 flex m-between">
						<view class="flex">
							<view>正常</view>
							<up-count-to bold :endVal="onLine" fontSize="16" color="#0052D9" class="m-l-5" />
							<view>台</view>
						</view>
						<view class="flex">
							<view>异常</view>
							<up-count-to bold :endVal="total - onLine" fontSize="16" color="#0052D9" class="m-l-5" />
							<view>台</view>
						</view>
					</view>
				</view>
				<up-line dashed></up-line>
				<view class="m-y-10">
					<view class="b-r-4 m-b-10 flex m-between">
						<view>筒仓设备数量</view>
						<view class="flex m-between">
							<up-count-to bold :endVal="total2" fontSize="16" color="#0052D9" />
							<view>台</view>
						</view>
					</view>
					<u-line-progress :percentage="normalRate2" height="10" activeColor="#437BFC" inactiveColor="#f7f7f7" />
					<view class="b-r-4 m-t-10 flex m-between">
						<view class="flex">
							<view>正常</view>
							<up-count-to bold :endVal="onLine2" fontSize="16" color="#0052D9" class="m-l-5" />
							<view>台</view>
						</view>
						<view class="flex">
							<view>异常</view>
							<up-count-to bold :endVal="total2 - onLine2" fontSize="16" color="#0052D9" class="m-l-5" />
							<view>台</view>
						</view>
					</view>
				</view>
			</u-collapse-item>

			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">监测设备列表</text></view>
				</template>
				<my-table :data="tableList" :columns="columns">
					<template #caozuo="{ row }">
						<u-icon name="play-circle-fill" color="#2979ff" class="m-center" @click="handleClick(row)"></u-icon>
					</template>
				</my-table>
			</u-collapse-item>

			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">筒仓气体</text></view>
				</template>
				<up-subsection
					:list="['一车间', '二车间']"
					:current="current"
					mode="subsection"
					@change="
						(i) => {
							current = i;
						}
					"
				/>

				<view v-for="item in qtList" :key="item.设备名称">
					<view class="p-10">
						{{ item.设备名称 }}
					</view>
					<my-grid :list="item.gridList" :col="2" decimals="2" type="lr" />
				</view>
			</u-collapse-item>

			<!-- 	<u-collapse-item name="3">
				<template #title>
					<view class="content-item-title"><text class="title-txt">预警统计</text></view>
				</template>
				<my-grid :list="list" :col="2"></my-grid>
				<view class="fw m-t-20 tc">近半年预警趋势分析</view>
				<view class="charts-box">
					<qiun-data-charts type="area" :opts="opts1" :chartData="chartData1" />
				</view>
			</u-collapse-item> -->

			<!-- <u-collapse-item name="4">
				<template #title>
					<view class="content-item-title"><text class="title-txt">预警列表</text></view>
				</template>
				<view class="flex s-center m-b-5">
					<view class="m-r-10 f1 w0">
						<up-search shape="square" :showAction="false" placeholder="请输入关键词进行搜索" v-model="searchVal1"
							bgColor="#f5f9fd" @clear="() => {}" />
					</view>
					<up-button style="width: 100rpx; height: 60rpx" color="#2172fc" text="搜索" />
				</view>
				<my-table :data="tableList1" :columns="columns1" emptyText="暂无数据">
					<template #rig="{ row }">
						<view @click="handlePush(row)" style="color: #1179e8; font-weight: bold">查看</view>
					</template>
				</my-table>
			</u-collapse-item> -->
		</u-collapse>
	</view>
</template>

<script setup>
import { getApiFabric } from '@/api/customApi';

const showMoreKeys = ref([0, 1, 2, 3, 4]),
	collapse = ref(null);

const tableList = ref([]),
	columns = [
		{
			prop: '监控名称',
			label: '监控名称',
			width: 110
		},
		{
			prop: '监控区域',
			label: '监控区域',
			width: 100
		},
		{
			prop: '监控状态',
			label: '状态',
			width: 50
		},
		{
			prop: 'caozuo',
			label: '播放',
			width: 50
		}
	],
	total = computed(() => tableList.value.length),
	onLine = computed(() => tableList.value.filter((item) => item.监控状态 == '在线').length),
	normalRate = computed(() => ((onLine.value / total.value) * 100).toFixed(2));

function fn() {
	getApiFabric({
		apiCode: '72adb4c1-38e8-4ca4-bc48-1bf517d1a54f',
		propertyMapping: {
			indexCode: 'indexCode',
			监控区域: 'regionName',
			监控名称: 'cn',
			监控状态: 'online'
		},
		pageIndex: 1,
		pageSize: 15,
		total: true,
		params: [
			{
				code: 'regionName',
				value: '采场双光谱'
			}
		]
	}).then((res) => {
		tableList.value = res.data;
		nextTick(() => {
			collapse.value.init();
		});
	});
}

function handleClick(row) {
	// 跳转播放页面
	uni.navigateTo({
		url: '/pages/application/xxjc/spjk/playVideo?cameraIndexCode=' + row.indexCode
	});
}

/********************************************************筒仓气体***********************************/
const current = ref(0),
	qtData = ref([]),
	qtList = computed(() =>
		qtData.value.filter((item) => {
			item.gridList = [
				{
					title: '一氧化碳',
					value: item.一氧化碳
				},
				{
					title: '氧气',
					value: item.氧气
				},
				{
					title: '温度',
					value: item.温度
				},
				{
					title: '甲烷',
					value: item.甲烷
				}
			];
			nextTick(() => {
				collapse.value.init();
			});
			return (current.value == 0 && item.设备名称.includes('一车间')) || (current.value == 1 && item.设备名称.includes('二车间'));
		})
	),
	total2 = computed(() => qtData.value.length),
	onLine2 = computed(() => qtData.value.filter((item) => item.设备状态 == 'online').length),
	normalRate2 = computed(() => ((onLine2.value / total2.value) * 100).toFixed(2));

function fn2() {
	getApiFabric({
		apiCode: '86adc6c6-c18d-4143-9223-95ebdb1fbad5',
		propertyMapping: {
			设备名称: 'deviceName',
			一氧化碳: '筒仓_一氧化碳',
			氧气: '筒仓_氧气',
			温度: '筒仓_温度',
			甲烷: '筒仓_甲烷',
			设备状态: 'status'
		}
	}).then((res) => {
		qtData.value = res.data;
		// nextTick(() => {
		// 	collapse.value.init()
		// })
	});
}

let list = ref([
	{
		title: '今日预警数',
		value: '2',
		unit: '次'
	},
	{
		title: '近半年预警数',
		value: '198',
		unit: '次'
	}
]);
let chartData1 = ref({}),
	opts1 = {
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		padding: [15, 0, 0, 0],
		dataLabel: false,
		legend: {
			show: false
		},
		xAxis: {
			disableGrid: true,
			calibration: true
		},
		yAxis: {
			gridType: 'dash',
			showTitle: true,
			data: [
				{
					min: 0,
					axisLine: false,
					title: '次数',
					titleOffsetX: -10,
					titleOffsetY: -5
				}
			]
		},
		extra: {
			area: {
				type: 'straight',
				opacity: 0.2,
				addLine: true,
				width: 2,
				gradient: true,
				activeType: 'hollow'
			}
		}
	};

const searchVal1 = ref(),
	tableList1 = ref([]),
	columns1 = [
		{
			label: '预警名称',
			prop: 'name',
			width: '80'
		},
		{
			label: '预警类别',
			prop: 'type',
			width: '80'
		},
		{
			label: '预警位置',
			prop: 'place',
			width: '80'
		},
		{
			label: '告警时间',
			prop: 'time',
			width: '100'
		},
		{
			label: '操作',
			prop: 'rig',
			width: '50'
		}
	];

function getServerData(refresh) {
	Promise.all([fn(), fn2()]).then(() => {
		if (refresh) {
			nextTick(() => {
				uni.stopPullDownRefresh();
			});
		}
		// setTimeout(() => {
		// 	collapse.value.init()
		// }, 400)
	});
}

onShow(() => {
	getServerData();
});

onPullDownRefresh(() => {
	getServerData(true);
});
</script>

<style lang="scss" scoped></style>
